<template>
	<view class="step1">
		<view class="scroll">
			<view class="detail">
				<view class="title">
					租地信息
				</view>
				<view class="com">
					<view class="tt">租地数量：</view>
					<view class="text">{{listData.tenancyNum}}块</view>
				</view>
				<view class="com">
					<view class="tt">可种植面积：</view>
					<view class="text">{{listData.plantSumArea}}平方</view>
				</view>
				<view class="com">
					<view class="tt">租地时间：</view>
					<view class="text">{{listData.tenancyDuration}}</view>
				</view>
				<view class="com">
					<view class="tt">预计租金：</view>
					<view class="money">{{listData.rent}}元</view>
				</view>
			</view>
			<view style="padding-left: 40rpx;">
				<view class="com">
					<view class="tt">签署人：</view>
					<view class="text">{{listData.fosterName}}</view>
				</view>
				<view class="com">
					<view class="tt">联系方式：</view>
					<view class="text">{{listData.phone}}</view>
				</view>
				<view class="com">
					<view class="tt">订单号：</view>
					<view class="text" style="font-size: 26rpx;">{{listData.orderNo}}</view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="btn df">
				<view class="up" @click="stepUp(2)">
					上一步
				</view>
				<view class="down" @click="pay">
					确认支付
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {findTenancyOrderById,pay} from "@/api/api.js"
	export default {
		data() {
			return {
				listData:{},
				payParams:{},
			}
		},
		onShow() {
			
		},
		mounted() {
			uni.$on('landId',(data)=>{
				console.log(data,"@@@@");
				this.getListData(data)
			})
		},
		destroyed() {
			uni.$off("landId")
		},
		methods: {
			async goPay(){
				uni.showLoading({
					title:"请稍侯",
					mask:true
				})
				const res = await pay(this.listData.orderNo)
				console.log(res);
				if(res?.data.code == 200){
					this.payParams = res.data.data
					uni.showToast({
						title: res.data.msg,
						icon: 'success'
					})
					uni.hideLoading()
					this.openWeixinPay()
				}else{
					uni.hideLoading()
					uni.showToast({
						title:res.data.msg,
						icon:'error'
					})
				}
			},
			openWeixinPay(){
				wx.requestPayment({
					...this.payParams,
					success: (res) => {
						console.log('唤起微信支付',res);
						if(res){
							uni.showToast({
								title:'支付成功',
								icon:'success'
							})
							setTimeout(()=>{
								uni.reLaunch({
									url:'/pages/index/index'
								})
							},1500)
						}
					},
					fail: (err) => {
						if(err.errMsg == 'requestPayment:fail cancel'){
							uni.showToast({
								title:'取消支付',
								icon:'error'
							})
						}else{
							uni.showToast({
								title:'支付失败',
								icon:'error'
							})
						}
						
					}
				})
			},
			pay() {
				this.goPay()
			},
			async getListData(id){
				const res = await findTenancyOrderById(id)
				console.log(res,"222222");
				this.listData = res.data.data
			},
			stepUp(i) {
				this.$emit('step', {index:i,imageURL:this.listData.contractPicture})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.step1 {

		.df {
			display: flex;
		}

		.scroll {
			width: 750rpx;
			// height: 152rpx;
			// padding: 34rpx 40rpx 30rpx;
			padding-top: 34rpx;
			padding-bottom: 30rpx;
			background-color: #fff;
			box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.12);
			border-radius: 0rpx 0rpx 36rpx 36rpx;
			margin-bottom: 30rpx;

			.title {
				font-size: 32rpx;
				color: #282828;
				margin-bottom: 36rpx;
				font-weight: bold;
			}

			.com {
				display: flex;
				margin-top: 28rpx;
				font-size: 32rpx;

				.tt {
					color: rgba(68, 78, 104, 0.7);
				}

				.text {
					color: #1D1D1D;
				}

				.money {
					color: #FA680A;
				}
			}

			.detail {
				padding-left: 40rpx;
				padding-bottom: 30rpx;
				border-bottom: 1rpx solid rgba(0, 0, 0, 0.08);
			}
		}

		.bottom {
			padding: 30rpx 30rpx;
			padding-top: 0;

			.btn {
				justify-content: space-between;
				margin-top: 60rpx;

				.up {
					width: 280rpx;
					height: 88rpx;
					background: rgba(27, 196, 109, 0.1);
					border-radius: 12rpx;
					border: 2rpx solid #1BC46D;
					line-height: 88rpx;
					text-align: center;
					color: #17CC77;
					font-weight: bold;
				}

				.down {
					width: 280rpx;
					height: 88rpx;
					background: #1BC46D;
					box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(27, 196, 109, 0.4);
					border-radius: 12rpx;
					line-height: 88rpx;
					text-align: center;
					color: #FFFFFF;
				}
			}
		}

	}
</style>